<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机练习页面</title>

    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/layui.css">
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>

</head>
<style>


    /*:class="{red:changeRed == index}"  @click="reds(index)"*/
    .problemDiv ul li {
        width: 100%;
        height: auto;
        border: 1px solid #d4d4d4;
        font-size: 15px;
        margin-top: 10px;
        padding: 7px 3px;
        line-height: normal;
    }
    .coll{
        margin-top: 14px;
    }
    .clearfix:after {
        content: "";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }


</style>

<body>


<div class="container">
    <div class="problemDiv">
        <div v-html="problem.pro_name" class="preDiv" style="margin: 17px 0;font-size: 19px">
        </div>

    <#--多选-->
        <div>
            <ul v-show="problem.type.type_id == '5'">
                <li v-for="(value,key) in problem.pro_mapname" :id="'duoxuan'+key" @mouseenter="enter('duoxuan',key)" @mouseleave="leave('duoxuan',key)">
                        <label :for="'duo'+key" style="height: 100%;width: 100%;">
                            <input type="checkbox" name="duo" :id="'duo'+key" :value="key">
                            {{value}}
                        </label>
                </li>
            </ul>
        </div>
    <#--单选-->
        <div>
            <ul v-show="problem.type.type_id == '4'">
                <li v-for="(value,key) in problem.pro_mapname" :id="'danxuan'+key" @mouseenter="enter('danxuan',key)" @mouseleave="leave('danxuan',key)">
                    <label @click="anss(key)" :for="'dan'+key" style="width: 100%;height: 100%">
                        <input type="radio" name="dan" :id="'dan'+key">
                        {{value}}
                    </label>
                </li>
            </ul>
        </div>
    <#--判断-->
         <div v-show="problem.type.type_id == '2'">
             <ul v-for="(value,key) in problem.pro_mapname">
                <label :for="'pan'+key" @click="anss(key)" onclick="falseColl()">
                  <input type="radio" name="check" :id="'pan'+key">
                  {{value}}
                </label>
             </ul><br>
         </div>



    <#--收藏按钮-->
        <#--<span style="margin-top: 50px" >
            <i class="layui-icon" class="coll" style="font-size: 30px; color: #1E9FFF;"
               onclick="coll()" onmouseover="over()">&#xe600;</i>

        </span>-->
        <div class="clearfix">
            <div style="margin-top: 20px;width: 100px;float: left" onclick="coll()" onmouseover="over()">
                <i class="layui-icon" class="coll" style="font-size: 20px; color: #1E9FFF;"
                   >&#xe600;</i><span>收藏本题</span>
            </div>
            <div style="margin-top: 20px;float: right">
                <button @click="anss('p')" class="btn btn-warning" style="margin-left: 13px">
                    查看答案解析
                </button>

                <button type="button" class="btn btn-success nextPro" @click="showButton('p')" style="margin-left: 15px">
                    下一题
                </button>
            </div>
        </div>



        <div class="answer" v-show="ans">答案为：
            <span>{{problem.p_true}}</span><br>
            答案解析是：
            <span>{{problem.true_res}}  </span>
        </div>

    </div>

</div>

<script>

    $(function () {
        $(".problemDiv ul li")
    })

    /*加载考题*/
    startExer();
    var pro = new Vue({
        el: ".problemDiv",
        data: {

            //多选 学生选择的答案
            studentAnswer: [],
            //控制答案解析的显示隐藏
            ans: false,
            showBu: false,
            problem: {},
            changeRed: 0,
        },
        methods: {
            //控制答案解析的显示隐藏
            anss: function (key) {
                if (key != this.problem.p_true) {
                    return pro.ans = true;
                }
            },
            showButton: function (key) {
                if (key == 's') {
                    startExer();
                    $('input').removeAttr('checked');
                    pro.ans = false;
                } else {
                    startExer();
                    $('input').removeAttr('checked');
                    pro.ans = false;
                }
            }, reds: function (index) {
                this.changeRed = index;
                $(this).children().next().attr('checked', 'checked');
            },
            enter:function (type,key) {
                //console.log(type+key);
                $("#"+type+key).css({"background-color":"#f3f3f3","color":"#00bc9b","border":"1px solid #909090"});
            },
            leave:function (type,key) {
                //console.log(type+key);
                $("#"+type+key).css({"background-color":"#ffffff","color":"#333333","border":"1px solid #d4d4d4"});
            },

        }
    });


    // 开始练习 下一题
    function startExer() {

        $('input:checked').css('border', 'none');

        var course_id = sessionStorage.getItem("course_id");
        console.log(course_id);

        $.ajax({
            type: "POSt",
            dataType: "json",
            url: "/sj/exercise.do",
            data: {
                "course_id": course_id
            },
            success: function (msg) {
                pro.problem = msg;
                console.log(msg);

            }
        });
    }
    //收藏按钮 事件
    function over() {
        layer.tips('点我可以收藏本题哦', '吸附元素选择器', {
            tips: [1, '#3595CC'],
            time: 1000
        });
    }

    //收藏题函数 传入题id 存入数据库
    function coll() {

        var pro_id = pro.problem.pro_id;
        console.log("本题的id是" + pro_id);

        //prompt层
        layer.prompt({title: '输入收藏备注:', formType: 2}, function (text, index) {

            $.ajax({
                type: "GET",
                dataType: 'json', /*服务器返回数据类型      contentType 是你发送给服务器的数据格式*/
                url: "/sj/shoucang.do?pro_id=" + pro_id + "&coll_remark=" + text,
                success: function (msg) {
                    if (msg == 0) {
                        layer.msg("少年为何频频收藏习题")
                    } else {
                        layer.msg('呵 收藏成功了,不看就白收藏了');
                    }
                }
            });
            layer.close(index);
        });

    }


    /*错题收藏到 错题库*/
    function falseColl() {
        var pro_id = pro.problem.pro_id;
        var student_id = 1;
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: '/falsePrac/saveFlase.do?pro_id=' + pro_id + '&student_id=' + student_id
        });
        console.log("错题添加成功");
    }

    /*题目 改变样式*/
    function changeProStyle() {
        console.log("我改变了样式");
        $(this).css("background-color", "yellow");
    }


</script>
</body>
</html>